<!-- @author pengys5 -->
<script id="spanModalTemplate" type="text/x-jsrender">
<div class="modal-dialog modal-lg">
    <div class="modal-content animated flipInY">
        <div class="modal-header" style="padding-bottom: 0">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                    class="sr-only">Close</span></button>
            <h4 class="modal-title">Span Info</h4>
            <small class="font-bold">OperationName: {{:operationName}}</small><br/>
            <small class="font-bold">{{dateFormat:startTime}} - {{dateFormat:endTime}}</small>
        </div>
        <div class="modal-body" style="padding: 0">
            <div class="tabs-container">

                <div class="tabs-left">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tags">Tags</a></li>
                        {{for logMessage}}
                          <li class=""><a data-toggle="tab" href="#logData{{: #index+1}}">Log Data{{: #index+1}}</a></li>
                        {{/for}}
                    </ul>
                    <div class="tab-content ">
                        <div id="tags" class="tab-pane active">
                            <div class="panel-body">
                                {{for tags}}
                                    <strong>{{:key}}</strong><p>{{:value}}</p>
                                {{/for}}
                            </div>
                        </div>
                        {{for logMessage}}
                        <div id="logData{{: #index+1}}" class="tab-pane">
                            <div class="panel-body">
                                <strong>time</strong><p>{{dateFormat:time}}</p>
                                {{for logInfo}}
                                    <strong>{{:key}}</strong><p>{{tabCharacter:value}}</p>
                                {{/for}}
                            </div>
                        </div>
                        {{/for}}
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

</script>
<script src="./span.js"></script>